<template>
	<view class="group-wrap">
		<view class="wrap">
			<view class="group-member">
				<!-- 		    <text class="pd-10">群组成员</text> -->
				<image :src="groupMember.avatar" mode="" @click="goinfofriend(groupMember)"></image>
				<view v-for="(item, index) in GroupMember" :key="index">
					<!-- <view class="member-list">{{ item.member || item.owner }}</view> -->
					<image :src="item.avatar" mode="" @click="goinfofriend(item)"></image>
				</view>
				<image src="/static/jia.png" mode="" @tap="addfriend" style="width: 25px;height: 25px;border: 1px dashed #CCCCCC;border-radius: 10px;margin-right: 10px;"></image>
				<image src="/static/heng.png" mode="" @tap="splfriend" v-show="currentName==groupMember.account" style="width: 25px;height: 25px;border: 1px dashed #CCCCCC;border-radius: 10px;"></image>
			</view>
			<view style="margin: 10px 0;">
				<view class="group-name">
					<text class="pd-10">群号</text>
					<view style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
						<text class="item-name" style="color: #000000;">{{ roomId }}</text>
						<image src="/static/images/next.png" style="width: 48rpx;height: 48rpx;margin-right: 8rpx;color: #9B9B9B;"></image>
					</view>
				</view>
				<view class="group-name" @click="xiugai(groupName)">
					<text class="pd-10">群组名称</text>
					<view style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
						<text class="item-name" style="color: #000000;">{{ groupName }}</text>
						<image src="/static/images/next.png" style="width: 48rpx;height: 48rpx;margin-right: 8rpx;color: #9B9B9B;"></image>
					</view>
				</view>
				<view class="group-name" @click="xiugaiqungonggao">
					<text class="pd-10">群公告</text>
					<view style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
						<view class="item-name" style="color: #000000;width: 200px;height: 40px;overflow: hidden;">{{ qunGonggao }}</view>
						<image src="/static/images/next.png" style="width: 48rpx;height: 48rpx;margin-right: 8rpx;color: #9B9B9B;"></image>
					</view>
				</view>
				<view class="group-name" @click="xiugaidesc">
					<text class="pd-10">群描述</text>
					<view style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
						<view class="item-name" style="color: #000000;">{{ groupDec }}</view>
						<image src="/static/images/next.png" style="width: 48rpx;height: 48rpx;margin-right: 8rpx;color: #9B9B9B;"></image>
					</view>
				</view>
				<view class="group-name" @tap="xiugaitouxiang" v-show="currentName==groupMember.account">
					<text class="pd-10">更改群头像</text>
				</view>
			</view>
			<view v-show="currentName==groupMember.account">
				<view class="group-name">
					<text class="pd-10">全员禁言</text>
					<view class="item-name">
						<switch @change="switch2Change1" :checked="kj_status" />
					</view>
				</view>
				<view class="group-name">
							<text class="pd-10">游戏启动，关闭后本轮数据清空</text>
							<view class="item-name">
								<switch @change="gamechange" :checked="gamezt==0?false:true" />
							</view>
						</view>
						<view class="group-name" @click="Grouptransfer">
							<text class="pd-10">群转让</text>
							<view style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
								<image src="/static/images/next.png" style="width: 48rpx;height: 48rpx;margin-right: 8rpx;color: #9B9B9B;"></image>
							</view>
						</view>
						<view class="group-name" @click="Groupadministrator">
							<text class="pd-10">群管理员</text>
							<view style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
								<image src="/static/images/next.png" style="width: 48rpx;height: 48rpx;margin-right: 8rpx;color: #9B9B9B;"></image>
							</view>
						</view>
						<view class="group-name" @click="Grouptaboo">
							<text class="pd-10">群禁言</text>
							<view style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
								<image src="/static/images/next.png" style="width: 48rpx;height: 48rpx;margin-right: 8rpx;color: #9B9B9B;"></image>
							</view>
						</view>
						<view class="group-name" @click="GrouptabooPerson">
							<text class="pd-10">禁言成员</text>
							<view style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
								<image src="/static/images/next.png" style="width: 48rpx;height: 48rpx;margin-right: 8rpx;color: #9B9B9B;"></image>
							</view>
						</view>
						<view class="group-name" @click="gameplay">
							<text class="pd-10">游戏设置</text>
							<view style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
								<image src="/static/images/next.png" style="width: 48rpx;height: 48rpx;margin-right: 8rpx;color: #9B9B9B;"></image>
							</view>
						</view>
				</view>
				
			</view>
			<view class="group-name" v-show="currentName!=groupMember.account" @tap="leaveGroup">
				<text class="pd-10">退出群组</text>
			</view>
			<view class="group-name" v-show="currentName==groupMember.account" @tap="dissolveGroup">
				<text class="pd-10">解散群组</text>
			</view>
			<!--    <view class="invite-member">
        <text class="pd-10 invite-title">邀请群成员</text>
        <view class="invite-wrap">
            <input placeholder="用户名" @input="addFriendNameFun" placeholder-style="color:#CFCFCF;line-height:40px;font-size:14px;" auto-focus>
            <button type="primary" @tap="addGroupMembers">邀请</button>
        </view>
    </view> -->
			<!-- <view class="black-list border-bottom">
        <text class="pd-5">群组黑名单</text>
    </view> -->
			<!--    <view class="bottom-wrap">
    <view class="disband-group" v-if="isOwner">
        <button type="warn" @tap="dissolveGroup">解散群组</button>
    </view>
    <view class="exit-group" v-if="!isOwner">
        <button type="warn" @tap="leaveGroup">退出群组</button>
    </view>
    </view> -->
		</view>
	</view>
</template>

<script>
	var WebIM = require("../../utils/WebIM")["default"];
	let disp = require("../../utils/broadcast");

	export default {
		data() {
			return {
				kj_status: false,
				roomId: "",
				myname:'',
				guanliyuan:'',
				// 群id
				groupName: "",
				// 群名称
				currentName: "",
				qunGonggao:'',
				//本地群id
				q_id: '',
				// 当前用户
				groupMember: [],
				GroupMember: [],
				//群主
				QunZ: '',
				// 群成员
				curOwner: "",
				// 当前群管理员
				groupDec: "",
				// 群描述
				addFriendName: [],
				isOwner: false,
				gamezt:''//当前游戏状态
			};
		},

		components: {},
		props: {},
		onLoad: function(options) {
			
			let groupInfo = JSON.parse(options.groupInfo)
			let me = this;
			this.roomId = groupInfo.groupId
			this.groupName = groupInfo.your
			this.currentName = groupInfo.myName
			this.q_id = groupInfo.qid
			this.isQinfo();
			disp.on("em.group.leaveGroup", function() {
				var pageStack = getCurrentPages(); // 判断是否当前路由是本页

				if (pageStack[pageStack.length - 1].route === me.__route__) {
					me.getGroupMember();
					this.getGroupInfo();
				}
			}); // console.log(this.data.roomId, this.data.groupName, this.data.currentName);
			// 获取群成员

			this.getGroupMember(); // 获取群信息

			this.getGroupInfo();
			
			this.getGroupGongG();
			// let option = {
			//     groupId: me.roomId    // 群组id
			// };
			// WebIM.conn.getGroupInfo(option).then((res) => {
			//     console.log(res)
			// 	me.guanliyuan = res.data[0].owner
			// 	me.myname = uni.getStorageSync('myUsername')
				
			// })
		},
		onShow() {
			this.getGroupMember(); // 获取群信息
			this.getGroupInfo();
			this.getGroupGongG();
			this.kj_status = uni.getStorageSync('jinyan')
		},
		methods: {
			//好友详情信息
			goinfofriend(msg){
				uni.navigateTo({
					url: '/pages/groupfriendinfo/groupfriendinfo?uid=' + msg.account + '&qid=' + this.roomId + '&guanli=' + this.guanli +
						'&q_id=' + this.q_id+"&isOwner="+this.isOwner+'&qunzhu='+this.groupMember.account
				})
			},
			//开始游戏
			gameplay() {
				uni.navigateTo({
					url: "/pages/Rulesgame/Rulesgame?roomid=" + this.roomId + '&q_id=' + this.q_id + '&groupName=' + this.groupName
				})
			},
			//群转让
			Grouptransfer(){
				uni.navigateTo({
					url: '/pages/groupSetting/Grouptransfer?id=' + this.roomId + "&qid=" + this.q_id+ "&groupName=" + this.groupName
				})
			},
			//禁言列表
			GrouptabooPerson(){
				uni.navigateTo({
					url: '/pages/groupSetting/GrouptabooPerson?id=' + this.roomId + "&qid=" + this.q_id
				})
			},
			//群禁言
			Grouptaboo(){
				uni.navigateTo({
					url: '/pages/groupSetting/Grouptaboo?id=' + this.roomId + "&qid=" + this.q_id
				})
			},
			//设置群管理员
			Groupadministrator(){
				uni.navigateTo({
					url: '/pages/groupSetting/Groupadministrator?id=' + this.roomId + "&qid=" + this.q_id
				})
			},
			//邀请好友
			addfriend() {
				uni.navigateTo({
					url: '/pages/groups_add/groups_add?id=' + this.roomId + "&qid=" + this.q_id
				})
			},
			//修改群
			xiugaidesc(){
				uni.navigateTo({
					url: "/pages/groupSetting/setDesc?roomId=" + this.roomId + '&q_id=' + this.q_id
				})
			},
			//踢出成员
			splfriend() {
				uni.navigateTo({
					url: '/pages/groups_add/splfriend?id=' + this.roomId + "&qid=" + this.q_id
				})
			},
			//获取当前开局状态
			isQinfo(){
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/lz/isqinfo',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					data: {
						id:this.q_id,
					},
					success: res => {
						console.log("当前开局状态",res)
						this.gamezt = res.data.data.kj_status
						this.gameone = res.data.data.yx_status
					}
				})
			},
			//开局
			gamechange(e){
				if(e.detail.value==true){
					let token = uni.getStorageSync("token")
					uni.request({
						url: this.G_base + '/api/lz/qyxkj',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'Authori-zation': 'Bearer ' + token
						},
						data: {
							id:this.q_id,
							status:1
						},
						success: res => {
							console.log(res)
							if(res.data.status==200){
								uni.showToast({
									title:'开局成功',
									icon:'none'
								})
								this.isQinfo();
							}else{
								uni.showToast({
									title:res.data.msg,
									icon:'none'
								})
							}
						}
					})
				}else{
					let token = uni.getStorageSync("token")
					uni.request({
						url: this.G_base + '/api/lz/qyxkj',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'Authori-zation': 'Bearer ' + token
						},
						data: {
							id:this.q_id,
							status:0
						},
						success: res => {
							console.log(res)
							if(res.data.status==200){
								uni.showToast({
									title:'关闭成功',
									icon:'none'
								})
								this.isQinfo();
							}else{
								uni.showToast({
									title:res.data.msg,
									icon:'none'
								})
							}
						}
					})
				}
			},
			//群禁言
			switch2Change1(e) {
				uni.setStorageSync('jinyan', e.detail.value)
				if (e.detail.value == true) {
					//群组中禁言所有成员
					let options = {
						groupId: this.roomId, //群组id
					};
					WebIM.conn.disableSendGroupMsg(options).then((res) => {
						console.log(res.data.mute)
						if (res.data.mute == true) {
							uni.showToast({
								title: "操作成功",
								icon: 'none'
							})
							this.$store.dispatch('setSearchKey',this.roomId)
							console.log(this.$store.state.searchKey)
						}
					})
				} else {
					let options = {
						groupId: this.roomId, //群组id
					};
					//群组中解除所有成员禁言
					WebIM.conn.enableSendGroupMsg(options).then((res) => {
						console.log(res)
						if (res.data.mute == false) {
							uni.showToast({
								title: "解除禁言",
								icon: 'none'
							})
							this.$store.dispatch('delSearchKey',this.roomId)
							console.log(this.$store.state.searchKey)
						}
					})
				}
			},
			//修改群名称
			xiugai(e) {
				if(this.currentName==this.groupMember.account){
					uni.navigateTo({
						url: "/pages/groupSetting/setGroup?roomId=" + this.roomId + '&q_id=' + this.q_id + '&groupname=' + e
					})
				}
				
			},
			//修改群头像
			xiugaitouxiang() {
				if(this.currentName==this.groupMember.account){
				let token = uni.getStorageSync("token")
				uni.chooseImage({
					success: (res) => {
						console.log(res)
						const tempFilePaths = res.tempFilePaths;
						console.log(res.tempFilePaths[0])
						uni.uploadFile({
							url: this.G_base + '/api/upload/image',
							filePath: res.tempFilePaths[0],
							name: 'file',
							method: 'post',
							header: {
								'Authori-zation': 'Bearer ' + token
							},
							success: (e) => {
								console.log(e)
								let data = e.data;
								let s = JSON.parse(data);
								this.touxiang_Img = s.data
								console.log(this.touxiang_Img)
								console.log(s)
								// 反馈图片地址

								console.log(s.data.url)
								let token = uni.getStorageSync("token")
								uni.request({
									url: this.G_base + '/api/lz/updateAvatar',
									method: "POST",
									data: {
										avatar: s.data.url,
										id: this.q_id
									},
									header: {
										'content-type': 'application/x-www-form-urlencoded',
										'Authori-zation': 'Bearer ' + token
									},
									success: (res) => {
										console.log(res);
										if (res.data.status == 200) {
											uni.showToast({
												title: "头像修改成功",
												icon: 'none'
											})

										}
									},
									fail: (err) => {
										console.log(err)
									}
								});

							},
							fail(e) {
								console.log(e)
							}
						});
					}
				});
				}
			},
			getGroupGongG:function(){
				let options = {
				    groupId: this.roomId            // 群组id                          
				};
				WebIM.conn.fetchGroupAnnouncement(options).then((res) => {
					let qgg=res.data.announcement
					this.qunGonggao = qgg.substring(0, 20)
				})
			},
			getGroupMember: function() {
				let token = uni.getStorageSync('token')
				uni.request({
					url: this.G_base + '/api/lz/qyinfo',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					data: {
						id: this.q_id,
					},
					success: res => {
						console.log(res)
						this.GroupMember = res.data.data.qy
						this.groupMember = res.data.data.qz
					}
				})
				return
				var me = this; // 获取群成员
				uni.showLoading({
					title: '加载中'
				});
				var pageNum = 1,
					pageSize = 1000;
				var options = {
					pageNum: pageNum,
					pageSize: pageSize,
					groupId: this.roomId,
					success: function(resp) {
						if (resp && resp.data) {
							me.setData({
								groupMember: resp.data
							});
							for (let i = 0; i < resp.data.length; i++) {
								let token = uni.getStorageSync('token')
								uni.request({
									url: me.G_base + '/api/lz/ltzh',
									method: 'POST',
									header: {
										'content-type': 'application/x-www-form-urlencoded',
										'Authori-zation': 'Bearer ' + token
									},
									data: {
										list: resp.data[i].member || resp.data[i].owner,
										status: 1
									},
									processData: true,
									success: res => {

										resp.data[i].headimg = res.data.data.useravatar
										setTimeout(() => {
											me.GroupMember = me.groupMember
											uni.hideLoading();
										}, 1000)
									}
								})
							}
						}
					},
					error: function(err) {}
				};
				WebIM.conn.listGroupMember(options);
			},
			getGroupInfo: function() {
				var me = this;
				// 获取群信息
				var options = {
					groupId: this.roomId,
					success: function(resp) {
						if (resp && resp.data) {
							let des=resp.data[0].description
							me.setData({
								curOwner: resp.data[0].owner,
								groupDec: des.substring(0,20)
							});

							if (me.currentName == resp.data[0].owner) {
								me.setData({
									isOwner: true
								});
							}
						}
					},
					error: function() {}
				};
				WebIM.conn.getGroupInfo(options);
			},
			addFriendNameFun: function(e) {
				var firendArr = [];
				firendArr.push(e.detail.value);
				this.setData({
					addFriendName: firendArr
				});
			},
			// 加好友入群
			addGroupMembers: function() {
				var me = this;
				var option = {
					users: this.addFriendName,
					groupId: this.roomId,
					success: function() {
						if (me.isExistGroup(me.addFriendName, me.groupMember)) {
							uni.showToast({
								title: "已在群中",
								duration: 2000
							});
						} else {
							uni.showToast({
								title: "邀请已发出",
								duration: 2000
							});
						}
						me.getGroupMember();
					},
					error: function(err) {
						uni.showToast({
							title: err.data.error_description,
							icon: 'none'
						});
					}
				};
				WebIM.conn.inviteToGroup(option);
			},
			isExistGroup: function(name, list) {
				for (let index = 0; index < list.length; index++) {
					if (name == list[index].member || name == list[index].owner) {
						return true;
					}
				}

				return false;
			},
			xiugaiqungonggao(){
				if(this.currentName==this.groupMember.account){
					uni.navigateTo({
						url:"/pages/qungonggao/qungonggao?roomId=" + this.roomId + '&q_id=' + this.q_id
					})
				}
				
			},
			leaveGroup: function() {
				var me = this;
				uni.showModal({
				    title: '提示',
				    content: '确定退出群聊?',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							
							WebIM.conn.quitGroup({
								groupId: me.roomId,
								success: function() {
									uni.showToast({
										title: "已退群",
										duration: 2000,
										success: function(res) {
											let token = uni.getStorageSync('token')
											uni.request({
												url: me.G_base + '/api/lz/usertq',
												method: 'POST',
												header: {
													'content-type': 'application/x-www-form-urlencoded',
													'Authori-zation': 'Bearer ' + token
												},
												data: {
													id: me.q_id,
												},
												success: res => {
													console.log(res)
													// redirectTo = 此操作不可返回
													setTimeout(() => uni.navigateBack({
														url: "../groups/groups?myName=" + me.currentName
													}), 2000);
												}
											})
										}
									});
									disp.fire("em.invite.deleteGroup"); //退群
								},
								error: function(err) {
									uni.showToast({
										title: err.data.error_description,
										icon: 'none'
									});
								}
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			dissolveGroup: function() {
				var me = this; // 解散一个群组
				uni.showModal({
				    title: '提示',
				    content: '确定解散群聊?',
				    success: function (res) {
				        if (res.confirm) {
							console.log(me.roomId)
				            console.log('用户点击确定');
							WebIM.conn.dissolveGroup({
								groupId: me.roomId,
								success: function() {
									uni.showToast({
										title: "已解散",
										duration: 2000,
										success: function(res) {
											let token = uni.getStorageSync('token')
											uni.request({
												url: me.G_base + '/api/lz/delq',
												method: 'POST',
												header: {
													'content-type': 'application/x-www-form-urlencoded',
													'Authori-zation': 'Bearer ' + token
												},
												data: {
													id: me.q_id,
												},
												success: res => {
													console.log(res)
													// redirectTo = 此操作不可返回
													setTimeout(() => uni.navigateBack({
														url: "../groups/groups?myName=" + me.currentName
													}), 2000);
												}
											})
											setTimeout(() => uni.navigateBack({
												url: "../groups/groups?myName=" + me.currentName
											}), 2000);
										}
									});
								},
								error: function(err) {
									uni.showToast({
										title: err.data.error_description,
										icon: 'none'
									});
								}
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			}
		}
	};
</script>
<style>
	@import "./groupSetting.css";
</style>
